<template>
  <!--  2.创建一个容器，要给容器设置大小，不设置的话是默认的大小-->
  <div ref="container" style="height: 300px"></div>
</template>

<script>
import { Gauge } from '@antv/g2plot';
import { onMounted, ref } from 'vue';
export default {
  setup() {
    const container = ref(null);
    let linePlot = null;
    let initChart = () => {
      const gauge = new Gauge(container.value, {
        percent: 0.75,
        type: 'meter',
        innerRadius: 0.75,
        range: {
          ticks: [0, 1 / 3, 2 / 3, 1],
          color: ['#F4664A', '#FAAD14', '#30BF78']
        },
        indicator: {
          pointer: {
            style: {
              stroke: '#D0D0D0'
            }
          },
          pin: {
            style: {
              stroke: '#D0D0D0'
            }
          }
        },
        statistic: {
          content: {
            style: {
              fontSize: '36px',
              lineHeight: '36px'
            }
          }
        }
      });

      gauge.render();
    };
    onMounted(initChart);
    return {
      container
    };
  }
};
</script>
